<template>
  <div>
    <!--数据列表-->
    <div class="table-container">
      <vxe-grid ref='customerSearchPLXGrid' v-bind="gridOptions"  size="mini" :loading="listLoading">
        <template #form>
          <div>
            <!--搜索-->
            <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
            <input id="hiddenText" type="text" style="display:none" />
            <el-form-item label="关键字：">
              <el-input v-model.trim="listQuery.keyword" class="input-width" style="width:300px" placeholder="公司名称/手机号,最少输入4个字符" clearable  @keydown.enter.native="keywordSearch()">
              </el-input>
            </el-form-item>
            <el-form-item label="统一社会信用码：" label-width="150">
              <el-input v-model="listQuery.businessCode" class="input-width" style="width:195px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="keywordSearch()"
                type="primary">
                查询
              </el-button>
            </el-form-item>
          </el-form>
          </div>
        </template>
        <template #pager>
          <div style="overflow: hidden">
            <div class="pagination-container">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize"
                :page-sizes="[10,15,20,50,100,200]"
                :total="count">
              </el-pagination>
            </div>
          </div>

        </template>

        <template #num1_default>
        </template>
      </vxe-grid>
    </div>
    <el-dialog :close-on-click-modal="false" title="新增客户产品线" :visible.sync="dialogVisible" width="500px">
      <el-form  :model="form" size="mini" label-width="100px" ref="form" :rules="rules">
        <el-form-item label="客户名称：">
          {{form.customerNames}}
        </el-form-item>
        <el-form-item label="产品线：" prop="goodsLineId">
          <el-select v-model="form.goodsLineId" filterable clearable>
            <el-option :label="item.cddValue" v-for="item in goodsLineList" :value="item.cddId" :key="item.cddId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>

    <qzdj ref="qzdj" @getList="getList"></qzdj>
  </div>
</template>
<script>
import {customerNewCustomerList,customerNewBatchGoodLine} from '@/api/company'
import {getCustomerSetting,} from '@/api/partner'

import {formatDate} from '@/utils/date';

import store from '@/store'
import { mapGetters } from 'vuex'
import qzdj from "./qzdj";

const defaultListQuery={
  keyword:'',
  businessCode:'',
  "pageNum" : 1,      //第几页，默认1
  "pageSize" : 10     //每页几条，默认10条
};
const defaultForm = {
  customerIds:'',
  customerNames:'',
  goodsLineId:'',
  chargeId:''//
};


export default {
  name: "index",
  data(){
    return {
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      count: 0,
      listLoading: false,
      roles:store.getters.roles ? store.getters.roles : [],
      gridOptions:{
        loading:this.listLoading,
        border: true,
        id: 'customerSearchPL',
        align:'center',
        autoResize:true,
        height:800,
        size:'mini',
        rowConfig: {
          keyField: 'ogId',
          isHover: true
        },
        columnConfig: {
          resizable: true
        },
        customConfig: {
          storage: true,
        },
        checkboxConfig:{
          reserve:true
        },
        toolbarConfig: {
          zoom: true,
          custom: true,
        },
        columns: [
          {
            field: 'customerName',
            title: '客户名称',
            width: 150,
          },
          {
            field: 'goodLineName',
            title: '产品线',
            width: 100,
          },
          {
            field: 'relationName',
            title: '关联子客户',
            width: 150,
          },
          {
            field: 'customerPotential',
            title: '潜在等级',
            width: 150,
          },
          {
            field: 'lastTrackingTime',
            title: '最近跟进时间',
            width: 150,

          },
          {
            field: 'lastOrderTime',
            title: '最新成交日期',
            showOverflow:true,
            width: 150,

          },
          {
            field: 'chargeName',
            title: '业务员',
            width: 100,
          },
          {
            field: 'creatorName',
            title: '创建人',
            width: 100,
          },
          {
            field: '',
            title: '操作',
            width: 150,
            fixed: 'right',
            slots: {
              // 使用 JSX 渲染
              default: ({row}) => {
                if(row.customerPotential.indexOf('Z') == -1 && row.isMainCustomer == 1){
                  return [
                    <el-button type="text" size="small"
                               onClick={() => this.showAdd(row)}>新增产品线</el-button>,
                    // <el-button style="margin-right:10px;" type="text" size="small" onClick={ () => this.showDengjiForm(row) }>设置潜在等级</el-button>,
                  ]
                }else{
                  return [
                    // <el-button type="text" size="small"
                    //            onClick={() => this.showAdd(row)}>新增产品线</el-button>,
                  ]
                }

              }
            },
          }
        ],
        data:[],
      },

      list:[],

      dialogVisible:false,
      btnLoading:false,
      form:JSON.parse(JSON.stringify(defaultForm)),
      rules:{
        goodsLineId: [{required: true, message: '此项必填', trigger: 'change'},],
      },
      goodsLineList:[]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {
    qzdj
  },
  created() {
     this.getCustomerSettingList()
  },
  filters: {

  },
  methods:{
    //显潜在等级
    showDengjiForm(item){
      this.$refs.qzdj.showDengjiForm(item)
    },
    getCustomerSettingList(){
      getCustomerSetting().then((res)=>{
        res.forEach((el)=>{
          if(el.cdtCode == 'goods_line'){
            this.goodsLineList = el.data
          }
        });
      })
    },
    showAdd(item){
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(defaultForm));
      let customerIds = [];
      let customerNames = []
      customerIds.push(item.customerId)
      customerNames.push(item.customerName)
      this.form.customerIds = customerIds.join(",")
      this.form.customerNames = customerNames.join(",")
    },

    //添加客户产品线
    handleConfirm(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let data = JSON.parse(JSON.stringify(this.form));
          customerNewBatchGoodLine(data).then(()=>{
            this.btnLoading = false;
            this.dialogVisible = false;
            this.getList()
          }).catch(()=>{
            this.btnLoading = false;
          })
        }
      })
    },

    //客户查询
    keywordSearch(){
      if((this.listQuery.keyword.length > 0 && this.listQuery.keyword.length < 4) || (this.listQuery.keyword.length == 0 && (this.listQuery.businessCode == '' || this.listQuery.businessCode == null)) ){
        this.$message({
          type: 'error',
          message: '最少输入4个字符!'
        });
        return false
      }
      this.handleSearchList();
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },
    //获取列表
    getList() {
      this.listLoading = true;
      customerNewCustomerList(this.listQuery).then(response => {
        this.gridOptions.data = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },

  },
}
</script>

<style  lang="scss">

</style>
